import "@/index.css";
import { cloneDeep } from "lodash";
// import TimeTriangle from "../../assets/timeTriangle.svg?react";
import "./style.less";

interface item {
  title: string;
  time: string;
}

interface HighLightBarProps {
  totalTime: number; // 总时间
  array: item[];
}

export const HighLightBar = (props: HighLightBarProps) => {
  const { totalTime = 300, array } = props;
  // 高光条的长度
  const barLength = 665;
  // title的一半长度
  const halfTitleLength = 124 / 2;
  // 计算文字和dot的位置信息
  const computeLocation = (array: item[]) => {
    return array.map((item) => {
      const start =
        ((Number(item.time.split(":")[0]) * 60 +
          Number(item.time.split(":")[1])) /
          totalTime) *
        barLength;
      let textStart = start - halfTitleLength + 10;
      if (start < halfTitleLength) {
        textStart = 0;
      }
      console.log("const_array=array.map ~ textStart:", textStart);
      const textEnd = textStart + 124;
      return {
        ...item,
        start,
        textStart,
        textEnd,
      };
    });
  };

  // 处理边界情况
  const edgeCasesHandle = (
    array: {
      start: number;
      textStart: number;
      textEnd: number;
      title: string;
      time: string;
    }[]
  ) => {
    const _array = cloneDeep(array);
    _array.forEach((item, index) => {
      // 计算边界条件
      // 文本显示，如果同一边，前一个的结束距离大于当前元素的开始距离，则当前元素移置前一元素末尾
      if (index - 2 >= 0 && _array[index - 2].textEnd > item.textStart) {
        item.textStart = _array[index - 2].textEnd;
      }
      // 如果文本超出，则左偏移超出的长度
      if (item.textEnd > barLength) {
        item.textStart = item.textStart - (item.textEnd - barLength);
      }
      // 如果dot右侧超出，则左偏移超出的长度
      if (barLength - item.start < 21) {
        item.start = barLength - 21;
      }
    });
    return _array;
  };

  let _array = computeLocation(array);
  _array = edgeCasesHandle(_array);
  return (
    <div className="bg-black h-24 w-[800px] flex items-center justify-center">
      <div
        id="high-light-bar"
        className="w-[500px] h-[10px] rounded-[6px] bg-[#1c1c1c] relative text-nowrap text-[#B3B6BA]"
        style={{ width: `${barLength}px` }}
      >
        {_array.map((item, index) => {
          return (
            <span key={index} style={{ left: `${item.textStart}px` }}>
              {`${item.title} ${item.time}`}
            </span>
          );
        })}
        {_array.map((item, index) => (
          <div className="dot relative" key={index}>
            {/* <TimeTriangle
              className="absolute"
              style={{
                position: "absolute",
                left: `${item.start + 5}px`,
                top: `${index % 2 === 0 ? "-15px" : "15px"}`,
                transform: `${
                  index % 2 === 0 ? "rotate(0deg)" : "rotate(180deg)"
                }`,
              }}
            /> */}
            <div
              className="absolute w-[21px] h-[10px] bg-[#6FEBF4]"
              style={{ left: `${item.start}px` }}
            ></div>
          </div>
        ))}
      </div>
    </div>
  );
};
